<template>
  <div id="all">
    <div class="common-layout" id="holder" style="width: 100%;height: 100%">
      <el-container id="main">
        <el-header style="height: 100px;width: 100%;margin-bottom: 20px; padding: 0px;background: rgba(255,255,255,0.40); ">
            <div style="margin-left: 50px;">
              <p style="float: inside;font-size: xx-large;font-family: 楷体;color: lightskyblue;font-weight: normal"><el-image :src="headPic" style="width: 22px;height: 30px;margin-right: 10px"/>速记单词管理系统</p>
            </div>
           </el-header>
        <el-container >

          <!--    登录框      -->
          <el-card class="box-card">
            <h2>登录</h2>
            <el-form>
              <el-form-item label="手机号:" label-width="20%">
                <el-input v-model="phone_number" placeholder="请输入管理员或开发者账号"/>
              </el-form-item>
              <el-form-item label="密码:" label-width="20%">
                <el-input type="password" v-model="password" placeholder="请输入密码"/>
              </el-form-item>

              <el-form-item class="subitem">
                <el-button type="primary" @click="sureForm">登录</el-button>
                <el-button type="info" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-container>
      </el-container>
    </div>
  </div>
  <div id="foot">
    <h3>@SuJiWords</h3>
  </div>
</template>

<script>
// import Vcode from "vue-puzzle-vcode";
import {ElMessage} from "element-plus";
import headPic from '/src/assets/headPic.png'
import axios  from "axios";

export default {
  name: "login",
  data(){
    return{
      headPic:headPic,
      phone_number:null,
      password:null,
      userMsg:{

      }
    }
  },
  methods:{
    reset(){
      this.phone_number = null
      this.password = null

    },
    sureForm(){
      if(this.phone_number == null|| this.password == null){
        ElMessage.warning('提交内容不能为空')
      }else{
        this.subForm()
      }
    },

    subForm(){
      axios({
        method:"POST",
        url:("http://39.101.199.5:8888/SuJiWords/user/login"),
        data: JSON.stringify({"phone_number":this.phone_number,"password":this.password}),
        headers:{'Content-Type':'application/json;charser=UTF-8'}
      }).then(
          response => (this.userMsg = response.data,this.checktoMain())
      )

    },
      checktoMain(){
      var pho = this.userMsg.data.phone_number;
        if(this.userMsg.msg == '成功登录') {
          if(this.userMsg.data.role ==1 | this.userMsg.data.role ==2){
            ElMessage.success(this.userMsg.msg)
            this.$router.push({
              path:"/mainMenu",
              query: {
                phoneNumber: pho
              }
            })
          }else ElMessage.warning('权限不够请联系管理员提升权限')
        }else {
          console.log(123)
          ElMessage.error(this.userMsg.msg)
        }
      }
  }

}
</script>

<style scoped>
#all{
      width: 100%;
      height: 980px;
       background-image: url("@/assets/back.jpg");
       background-repeat: no-repeat;
       background-size: 100%;
     }
.box-card{
  background-color: rgba(255,255,255,0.60);
  width: 400px;
  height: 300px;
  position: absolute;
  top: 150px;
  left: 5%;
}
.subitem{
  float: right;
}
h2{
  text-align: center;
}
#foot{
  line-height: 200px;
  text-align: center;
  height: 200px;
}


</style>